<template>
    <div class="list1 institution">
         <div class="bscroll">
            <vue-better-scroll class="wrapper"
                                ref="scroll0"
                                :scrollbar="scrollbarObj"
                                :pullDownRefresh="pullDownRefreshObj"
                                :pullUpLoad="pullUpLoadObj"
                                :startY="parseInt(startY)"
                                @pullingDown="onPullingDown"
                                @pullingUp="onPullingUp">
                <div class="bscroll-container">
                    <!-- 内容部分 -->
                    <div class="list1_main">
                        <div class="searchDiv">
                            <input type="text" v-model="param.data.FileName"
                                   class="search"
                                   placeholder="输入关键字">
                            <button class="searchbtn"
                                    @click="onSearch"></button>
                        </div>
                        <noData v-if="!listArr.length"></noData>
                        <ul class="list1Box">
                            <li v-for="(item,index) in listArr"
                                :key="index"
                                @click="goPreview(item)">
                                <h6 class="fileTit">{{item.FileName}}</h6>
                                <p>颁发部门: {{item.PromulgateDepart}}<x-icon type="ios-arrow-right" size="20"></x-icon></p>
                                <p>实施日期: {{item.ImplementDate}}</p>
                            </li>
                        </ul>
                    </div>

                    <!-- 下载提示弹窗 -->
                    <div class="downDialogBox" v-if="dialogShow">
                        <div class="institution_mask"></div>
                        <div class="downDialog">
                            <p class="downmsg_tit">是否下载该附件？</p>
                            <div class="btns">
                                <button class="cancelbtn"
                                        @click="dialogShow=false">取消</button>
                                <button class="confirmbtn"
                                        @click="handleDownload">确认</button>
                                <!-- <a class="confirmbtn" :href="itemInfo.FilePath[0]" download="itemInfo.FileName" target="_blank" rel="nofollow">确认</a> -->
                            </div>
                            <button class="closebtn" @click="dialogShow=false"></button>
                        </div>
                    </div>
                </div>
            </vue-better-scroll>
        </div>
        <myMenu></myMenu>
    </div>
</template>
<script>
import { Radio, Group, Actionsheet } from 'vux'

import VueBetterScroll from 'vue2-better-scroll'
import myMenu from '@/commonComponents/menu'
export default {
    components: {
        Radio,
        Group,
        myMenu,
        VueBetterScroll
    },
    data () {
        return {
            param: {
                'allowPaging': true,
                'business': 'GetRegulatory',
                'data': {
                    'EndDate': '',
                    'FileName': '',
                    'StartDate': '',
                    'Type': ''
                },
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': 'AF0EC33214DA0CE97E2067CC1C4E3A6E',
                'userId': ''
            },
            listArr: [],
            // dropDown: false
            // 这个配置可以开启滚动条，默认为 false。当设置为 true 或者是一个 Object 的时候，都会开启滚动条，默认是会 fade 的
            scrollbarObj: {
                fade: true
            },
            // 这个配置用于做下拉刷新功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启下拉刷新，可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）
            pullDownRefreshObj: false,
            // 这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，可以配置离底部距离阈值（threshold）来决定开始加载的时机
            pullUpLoadObj: {
                threshold: 0,
                txt: {
                    more: '加载更多',
                    noMore: '没有更多数据了'
                }
            },
            startY: 0, // 纵轴方向初始化位置
            listCount: 0, // 当前列表条数
            listAllCount: 0, // 总条数
            dialogShow: false,
            itemInfo: {}// 列表信息
        }
    },
    created () {
        this.$vux.loading.show({
            text: '加载中...'
        })
    },
    mounted () {
        var token = JSON.parse(window.localStorage.getItem('userInfo'))
        this.param.userId = token.userid
        if (this.$route.query.type) {
            this.param.data.Type = this.$route.query.type
        }
        this.param.data.StartDate = this.getYear() + '-01-01'
        this.param.data.EndDate = this.getdatenew()
        this.onPullingDown()
    },
    methods: {
        // 获取列表数据
        getData () {
            let that = this
            return this.$axiosAjax.getConfigJson(this.param)
        },
        // 搜索
        onSearch (item) {
            this.param.pageIndex = 0
            this.onPullingDown()
        },
        // 预览
        goPreview (item) {
            if (item.FilePath[0].url) {
                this.$router.push({
                    path: '/listmenus',
                    query: {
                        src: item.FilePath[0].url
                    }
                })
            }
        },
        onPullingDown () {
            // 模拟下拉刷新
            let that = this
            this.getData().then(res => {
                if (res.data.code === 0) {
                    that.listArr = res.data.data
                    that.listCount = that.listArr.length
                    that.listAllCount = res.data.count
                    that.$vux.loading.hide()
                }
                if (that.listCount < that.listAllCount) {
                    that.$refs.scroll0.forceUpdate(true)
                } else {
                    that.$refs.scroll0.forceUpdate(false)
                }
            }).finally(() => {
                that.$vux.loading.hide()
            })
        },
        onPullingUp () {
            let that = this
            this.parmas.pageIndex++
            // 模拟上拉 加载更多数据
            this.getData().then(res => {
                if (res.data.code === 0) {
                    that.listArr = that.listArr.concat(res.data.data)
                    that.listCount = that.listArr.length
                    that.$vux.loading.hide()
                }
                if (that.listCount < that.listAllCount) {
                    that.$refs.scroll0.forceUpdate(true)
                } else {
                    that.$refs.scroll0.forceUpdate(false)
                }
            }).finally(() => {
                that.$vux.loading.hide()
            })
        },
        // 点击列表弹窗
        showDialog (item) {
            this.dialogShow = true
            this.itemInfo = item
        },
        // 确认下载
        handleDownload () {
            this.dialogShow = false
            // var src = this.itemInfo.FilePath[0].replace(/https/,'http')
            window.open(this.itemInfo.FilePath[0])
        },
        // 获取年份
        getYear () {
            var date = new Date()
            var year = date.getFullYear()
            return year
        },
        // 获取年月日
        getdatenew () {
            var date = new Date()
            var seperator1 = '-'
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var strDate = date.getDate()
            if (month >= 1 && month <= 9) {
                month = '0' + month
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = '0' + strDate
            }
            var currentdate = year + seperator1 + month + seperator1 + strDate
            return currentdate
        },
        change (value, label) {
            // console.log('change:', value, label)
            if (value) {
                window.sessionStorage.setItem('name1', value)
            }
            for (var k in this.list) {
                if (this.list[k].deptName == value) {
                    window.sessionStorage.setItem('id1', this.list[k].deptId)
                    this.$router.go(-1)
                }
            }
        },
        dataArr () {
            this.$axiosAjax.getConfigJson(this.param).then((res) => {
                if (res.status) {
                    this.list = res.data.data
                    var arr = res.data.data
                    var array = []
                    for (var k in arr) {
                        array.push(arr[k].deptName)
                    }
                    this.listArr = array
                }
            })
        }
    },
    watch: {
        'param.data.name' (val) {
            this.dataArr()
        }
    }
}
</script>
<style lang="less" scope>
.list1 {
    width: 100%;
    height: 100%;
    font-size: 14px;
    .list1_main {
        // height: 627px;
        width: 100%;
        .no-data {
            background-color: #fff;
        }
        .searchDiv {
            background-color: #ebeef2;
            padding: 10px 0;
            position: relative;
            .searchbtn {
                width: 24px;
                height: 25px;
                position: absolute;
                top: 18px;
                right: 30px;
                background: url(../../../static/images/s_03.png) no-repeat
                    center;
                background-size: 24px 25px;
            }
            .search {
                width: 335px;
                margin: 0 auto;
                height: 40px;
                line-height: 40px;
                padding-left: 10px;
                box-sizing: border-box;
                border-radius: 10px;
                display: block;
                border: 1px solid #999;
            }
        }
        .list1Box {
            width: 100%;
            // height: 627px;
            background-color: #fff;
            padding-left: 20px;
            .fileTit {
                font-size: 14px;
                font-weight: normal;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-right: 50px;
            }
            li {
                // height: 82px;
                border-bottom: 1px solid #f0eff4;
                padding: 18px 20px 14px 0;
                position: relative;
                h6 {
                    line-height: 28px;
                    color: #333;
                }
                p {
                    line-height: 24px;
                    color: #666;
                }
                .vux-x-icon {
                    fill: #999;
                    float: right;
                    width: 20px;
                    height: 20px;
                }
            }
            .weui-search-bar__cancel-btn {
                display: none;
            }
            .weui-cells {
                margin-top: 2px;
            }
        }
    }
    .weui-cell:before {
        left: 0;
    }
    .weui-cell__bd p {
        width: 316px;
    }
}
.institution {
    .downDialogBox {
        .institution_mask {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1 !important;
        }
        .downDialog {
            box-sizing: border-box;
            text-align: center;
            width: 290px;
            height: 150px;
            position: absolute;
            top: 110px;
            left: 44px;
            z-index: 2;
            background-color: #fff;
            border-radius: 20px;
            padding-top: 20px;
            .downmsg_tit {
                height: 55px;
                line-height: 55px;
                font-size: 16px;
                font-weight: bold;
                color: #333;
            }
            .btns {
                padding-top: 10px;
                .cancelbtn {
                    width: 80px;
                    height: 40px;
                    background-color: #ffb400;
                }
                .confirmbtn {
                    width: 80px;
                    height: 40px;
                }
            }
            .closebtn {
                width: 16px;
                height: 16px;
                background: url('../../../static/images/closebtn.png') no-repeat
                    left top;
                background-size: 16px 16px;
                position: absolute;
                top: -27px;
                right: 0;
            }
        }
    }
}
.bscroll {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}
</style>
